<template>
  <div class="accident-multiple-analysis">
    <div class="menu">
      <div class="go-home" @click="goback">
        <el-icon :size="20">
          <HomeFilled />
        </el-icon>
        <span class="label">系统首页</span>
      </div>

      <div class="report active">
        <el-icon :size="20">
          <Grid />
        </el-icon>
        <span class="label">多项分析报表</span>
      </div>
      <el-menu :default-openeds="['1', '2', '3', '4', '5']">
        <el-sub-menu index="1" v-if="['a1', 'a2'].some((item) => jur.pageInfoList.includes(item))">
          <template #title>
            <span class="menu-text" title="总体情况统计分析">总体情况统计分析</span>
          </template>
          <el-menu :default-active="activeMenu" @select="onMenuChange">
            <el-menu-item index="a1" v-if="jur.pageInfoList.includes('a1')">
              <span class="menu-text" title="一般程序交通事故四项指数统计">一般程序交通事故四项指数统计</span>
            </el-menu-item>
            <el-menu-item index="a2" v-if="jur.pageInfoList.includes('a2')">
              <span class="menu-text" title="乡镇街道交通事故发生情况统计">乡镇街道交通事故发生情况统计</span>
            </el-menu-item>
          </el-menu>
        </el-sub-menu>
        <el-sub-menu index="2" v-if="
          [
            'b1',
            'b2',
            'b3',
            'b4',
            'c1',
            'c2',
            'd1',
            'e1',
            'e2',
            'e3',
            'f1',
            'f2',
            'g1',
            'g2',
            'g3',
            'g4',
            'h1',
            'h2',
            'h3',
            'h4',
            'h5',
            'h6',
          ].some((item) => jur.pageInfoList.includes(item))
        ">
          <template #title>
            <span title="事故特点统计分析">事故特点统计分析</span>
          </template>
          <el-menu :default-openeds="['b0', 'c0', 'd0', 'e0', 'f0', 'g0', 'h0']" :default-active="activeMenu"
            @select="onMenuChange">
            <el-sub-menu index="b0" v-if="
              ['b1', 'b2', 'b3', 'b4'].some((item) =>
                jur.pageInfoList.includes(item)
              )
            ">
              <template #title>
                <span class="menu-text" title="（一）交通事故时间分布">（一）交通事故时间分布</span>
              </template>

              <el-menu-item index="b1" v-if="jur.pageInfoList.includes('b1')">
                <span class="menu-text" title="一般程序交通事故起数折线图（小时）">一般程序交通事故起数折线图（小时）</span>
              </el-menu-item>
              <el-menu-item index="b2" v-if="jur.pageInfoList.includes('b2')">
                <span class="menu-text" title="一般程序交通事故起数柱状图（月份）">一般程序交通事故起数柱状图（月份）</span>
              </el-menu-item>
              <el-menu-item index="b3" v-if="jur.pageInfoList.includes('b3')">
                <span class="menu-text" title="一般程序交通事故死亡人数时间折线图（小时）">一般程序交通事故死亡人数时间折线图（小时）</span>
              </el-menu-item>
              <el-menu-item index="b4" v-if="jur.pageInfoList.includes('b4')">
                <span class="menu-text" title="一般程序交通事故死亡人数柱状图（月份）">一般程序交通事故死亡人数柱状图（月份）</span>
              </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="c0" v-if="
              ['c1', 'c2'].some((item) => jur.pageInfoList.includes(item))
            ">
              <template #title>
                <span class="menu-text" title="（二）交通事故道路分布">（二）交通事故道路分布</span>
              </template>
              <el-menu-item index="c1" v-if="jur.pageInfoList.includes('c1')">
                <span class="menu-text" title="道路分布统计分析">道路分布统计分析</span>
              </el-menu-item>

              <el-menu-item index="c2" v-if="jur.pageInfoList.includes('c2')">
                <span class="menu-text" title="各辖区交通事故多发路段">各辖区交通事故多发路段</span>
              </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="d0" v-if="['d1'].some((item) => jur.pageInfoList.includes(item))">
              <template #title>
                <span class="menu-text" title="（三）交通事故认定原因">（三）交通事故认定原因</span>
              </template>
              <el-menu-item index="d1" v-if="jur.pageInfoList.includes('d1')">
                <span class="menu-text" title="一般程序事故认定原因统计表">一般程序事故认定原因统计表</span>
              </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="e0" v-if="
              ['e1', 'e2', 'e3'].some((item) =>
                jur.pageInfoList.includes(item)
              )
            ">
              <template #title>
                <span class="menu-text" title="（四）交通事故现场情况">（四）交通事故现场情况</span>
              </template>
              <el-menu-item index="e1" v-if="jur.pageInfoList.includes('e1')">
                <span class="menu-text" title="事故形态统计">事故形态统计</span>
              </el-menu-item>

              <el-menu-item index="e2" v-if="jur.pageInfoList.includes('e2')">
                <span class="menu-text" title="车辆行驶状态统计">车辆行驶状态统计</span>
              </el-menu-item>

              <el-menu-item index="e3" v-if="jur.pageInfoList.includes('e3')">
                <span class="menu-text" title="隔离设施情况">隔离设施情况</span>
              </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="f0" v-if="
              ['f1', 'f2'].some((item) => jur.pageInfoList.includes(item))
            ">
              <template #title>
                <span class="menu-text" title="（五）事故车辆情况">（五）事故车辆情况</span>
              </template>
              <el-menu-item index="f1" v-if="jur.pageInfoList.includes('f1')">
                <span class="menu-text" title="车辆登记/检验情况统计">车辆登记/检验情况统计</span>
              </el-menu-item>

              <el-menu-item index="f2" v-if="jur.pageInfoList.includes('f2')">
                <span class="menu-text" title="车辆使用性质（十二类安全生产事故车辆标红）">车辆使用性质（十二类安全生产事故车辆标红）</span>
              </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="g0" v-if="
              ['g1', 'g2', 'g3', 'g4'].some((item) =>
                jur.pageInfoList.includes(item)
              )
            ">
              <template #title>
                <span class="menu-text" title="（六）环境因素">（六）环境因素</span>
              </template>
              <el-menu-item index="g1" v-if="jur.pageInfoList.includes('g1')">
                <span class="menu-text" title="天气情况统计">天气情况统计</span>
              </el-menu-item>
              <el-menu-item index="g2" v-if="jur.pageInfoList.includes('g2')">
                <span class="menu-text" title="路面状况统计">路面状况统计</span>
              </el-menu-item>
              <el-menu-item index="g3" v-if="jur.pageInfoList.includes('g3')">
                <span class="menu-text" title="路表情况统计">路表情况统计</span>
              </el-menu-item>
              <el-menu-item index="g4" v-if="jur.pageInfoList.includes('g4')">
                <span class="menu-text" title="照明情况统计">照明情况统计</span>
              </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="h0" v-if="
              ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].some((item) =>
                jur.pageInfoList.includes(item)
              )
            ">
              <template #title>
                <span class="menu-text" title="（七）交通事故当事人特征">（七）交通事故当事人特征</span>
              </template>
              <el-menu-item index="h1" v-if="jur.pageInfoList.includes('h1')">
                <span class="menu-text" title="交通事故责任者交通方式">交通事故责任者交通方式</span>
              </el-menu-item>
              <el-menu-item index="h2" v-if="jur.pageInfoList.includes('h2')">
                <span class="menu-text" title="交通事故责任者驾龄">交通事故责任者驾龄</span>
              </el-menu-item>
              <el-menu-item index="h3" v-if="jur.pageInfoList.includes('h3')">
                <span class="menu-text" title="交通事故责任者年龄">交通事故责任者年龄</span>
              </el-menu-item>
              <el-menu-item index="h4" v-if="jur.pageInfoList.includes('h4')">
                <span class="menu-text" title="交通方式伤亡人数统计">交通方式伤亡人数统计</span>
              </el-menu-item>
              <el-menu-item index="h5" v-if="jur.pageInfoList.includes('h5')">
                <span class="menu-text" title="伤亡人员职业统计">伤亡人员职业统计</span>
              </el-menu-item>
              <el-menu-item index="h6" v-if="jur.pageInfoList.includes('h6')">
                <span class="menu-text" title="伤亡人员年龄统计">伤亡人员年龄统计</span>
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-sub-menu>
        <el-sub-menu index="3" v-if="jur.pageInfoList.includes('death')">
          <template #title>
            <span class="menu-text" title="统计报告分析">统计报告分析</span>
          </template>

          <el-menu :default-active="activeMenu" @select="onMenuChange">
            <el-menu-item index="death" v-if="jur.pageInfoList.includes('death')">
              <span class="menu-text" title="亡人事故报告的预览与导出">亡人事故报告</span>
            </el-menu-item>
          </el-menu>
        </el-sub-menu>
        <el-sub-menu index="4" v-if="jur.pageInfoList.includes('hir')">
          <template #title>
            <span title="历史调查记录">历史调查记录</span>
          </template>

          <el-menu :default-active="activeMenu" @select="onMenuChange">
            <el-menu-item index="hir" v-if="jur.pageInfoList.includes('hir')">
              <span title="历史调查记录">历史调查记录</span>
            </el-menu-item>
          </el-menu>
        </el-sub-menu>
        <el-sub-menu index="5" v-if="jur.pageInfoList.includes('amg')">
          <template #title>
            <span title="权限管理">权限管理</span>
          </template>

          <el-menu :default-active="activeMenu" @select="onMenuChange">
            <el-menu-item index="amg" v-if="jur.pageInfoList.includes('amg')">
              <span title="权限管理">权限管理</span>
            </el-menu-item>
            <el-menu-item index="rygl" v-if="jur.pageInfoList.includes('amg')">
              <span title="人员管理">人员管理</span>
            </el-menu-item>
          </el-menu>
        </el-sub-menu>
      </el-menu>
    </div>

    <div class="content" @click="handleClick">
      <div class="flex flex-row align-center form">
        <ElForm inline label-width="90px">
          <ElFormItem label="时间维度">
            <el-date-picker v-model="daterange" style="width: 260px" type="daterange" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" />
          </ElFormItem>

          <ElFormItem>
            <ElButton type="primary" @click="queryAction" v-if="activeMenu !== 'acd'">查询</ElButton>
            <!-- <ElButton
              @click="reportUrlCreate"
              v-if="activeMenu === 'acd' || activeMenu === 'death'"
              >导出</ElButton
            > -->
            <!-- <ElButton type="danger"  v-if="activeMenu === 'acd' || activeMenu === 'death'" @click="reportUrlCreate">导出整体报告</ElButton> -->
          </ElFormItem>
        </ElForm>
      </div>

      <div class="main-area">
        <!-- 事故详情组件 -->
        <EmergencyPaging ref="emergencyPagingRef" />
        <!-- 一般程序交通事故四项指数统计 -->
        <AccidentFourIndicatorTable :height="tableHeight" v-show="activeMenu == 'a1'"
          :data="accidentFourIndicatorTableData" />
        <!-- 乡镇街道交通事故发生情况统计 -->
        <AccidentTownsTable :height="tableHeight" v-show="activeMenu == 'a2'" :data="accidentTownsTableData" />
        <!-- 一般程序交通事故起数折线图（小时） -->
        <div v-show="activeMenu == 'b1'" ref="generalTrafficLineChartRef" class="general-traffic-accident-chart"></div>
        <!-- 一般程序交通事故起数柱状图（月份） -->
        <div v-show="activeMenu == 'b2'" ref="generalTrafficBarChartRef" class="general-traffic-accident-chart"></div>
        <!--  一般程序交通事故死亡人数时间折线图（小时）-->
        <div v-show="activeMenu == 'b3'" ref="generalTrafficDeathNumLineChartRef"
          class="general-traffic-accident-chart">
        </div>
        <!-- 一般程序交通事故死亡人数柱状图（月份） -->
        <div v-show="activeMenu == 'b4'" ref="generalTrafficDeathNumBarChartRef" class="general-traffic-accident-chart">
        </div>

        <!-- 道路分布统计分析 -->
        <AccidentRoadsTable :height="tableHeight" v-show="activeMenu == 'c1'" :data="accidentRoadsTableData" />
        <AccidentFrequentlyOccuredRoadsTable :height="tableHeight" v-show="activeMenu == 'c2'"
          :data="accidentFrequentlyOccuredRoadsTableData" />
        <!-- 一般程序事故认定原因统计表 -->
        <AccidentDeterminationTable :height="tableHeight" v-show="activeMenu == 'd1'"
          :data="accidentDeterminationTableData" />
        <!-- 事故形态统计 -->
        <AccidentFormsTable :height="tableHeight" v-show="activeMenu == 'e1'" :data="accidentFormsTableData" />
        <!-- 车辆行驶状态 -->
        <VehicleDrivingStatusTable :height="tableHeight" v-show="activeMenu == 'e2'"
          :data="vehicleDrivingStatusTableData" />
        <!-- 隔离设施情况 -->
        <AccidentGlssTable :height="tableHeight" v-show="activeMenu == 'e3'" :data="accidentGlssTableData"
          :data2="accidentZyGlssTableData" :data3="accidentFhGlssTableData" />
        <!-- 车辆登记、检验情况 -->
        <VehicleInspectionTable :height="tableHeight" v-show="activeMenu == 'f1'" :data="vehicleInspectionTableData" />
        <!-- 车辆性质 -->
        <VehicleTypeTable :height="tableHeight" v-show="activeMenu == 'f2'" :data="vehicleTypeTableData" />
        <!-- 环境因素：天气 -->
        <EnvWeatherTable :height="tableHeight" v-show="activeMenu == 'g1'" :data="envWeatherTableData" />
        <!-- 环境因素：路面 -->
        <EnvRoadTable :height="tableHeight" v-show="activeMenu == 'g2'" :data="envRoadTableData" />
        <!-- 环境因素：路表 -->
        <EnvRoadFaceTable :height="tableHeight" v-show="activeMenu == 'g3'" :data="envRoadFaceTableData" />
        <!-- 环境因素：照明 -->
        <EnvLightingTable :height="tableHeight" v-show="activeMenu == 'g4'" :data="envLightingTableData" />

        <!-- 当事人特征：交通方式 -->
        <AccidentDriverTransportFeatureTable :height="tableHeight" v-show="activeMenu == 'h1'"
          :data="accidentDriverTransportData" />
        <AccidentDriverLicenseAgeFeatureTable :height="tableHeight" v-show="activeMenu == 'h2'"
          :data="accidentDriverLicenseAgeData" />
        <AccidentDriverAgeFeatureTable :height="tableHeight" v-show="activeMenu == 'h3'"
          :data="accidentDriverAgeData" />
        <AccidentDriverDeathFeatureTable :height="tableHeight" v-show="activeMenu == 'h4'"
          :data="accidentDriverDeathData" />
        <AccidentJobFeatureTable :height="tableHeight" v-show="activeMenu == 'h5'" :data="accidentJobData" />
        <AccidentAgeFeatureTable :height="tableHeight" v-show="activeMenu == 'h6'" :data="accidentAgeData" />
        <!-- 亡人事故报告的预览与导出 -->
        <DeathAccident v-show="activeMenu == 'death'" ref="deathreportData" />
        <!-- 历史调查记录 -->
        <HistoricalInvestigationRecords v-show="activeMenu == 'hir'" :height="tableHeight"
          :data="historicalInvestigationRecords" />
        <div v-show="activeMenu == 'amg'">
          <AuthorityManagement :page-lists="pageList" />
        </div>
        <div v-show="activeMenu == 'rygl'">
          <AuthPersonManagement :page-lists="pageList" :data="authPersonManagement" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { GetReportUrl } from "@/service/api/report-analysis";
import { jurisdiction } from "@/store";
// import Box from "@/components/BorderBox/index.vue";

import EmergencyPaging from "@/components/EmergencyPaging/index.vue";
import HistoricalInvestigationRecords from "./reports/HistoricalInvestigationRecords.vue";
import DeathAccident from "./reports/DeathAccident.vue";
import AccidentFourIndicatorTable from "./reports/AccidentFourIndicator.vue";
import AccidentRoadsTable from "./reports/AccidentRoads.vue";
import AccidentFrequentlyOccuredRoadsTable from "./reports/AccidentFrequentlyOccuredRoads.vue";

import AccidentDeterminationTable from "./reports/AccidentDetermination.vue";
import AccidentFormsTable from "./reports/AccidentForms.vue";
import AccidentGlssTable from "./reports/AccidentGlss.vue";
import AccidentTownsTable from "./reports/AccidentTowns.vue";

import VehicleDrivingStatusTable from "./reports/DrivingStatus.vue";
import VehicleInspectionTable from "./reports/VehicleInspection.vue";
import VehicleTypeTable from "./reports/VehicleType.vue";

import EnvWeatherTable from "./reports/EnvWeather.vue";
import EnvRoadTable from "./reports/EnvRoad.vue";
import EnvRoadFaceTable from "./reports/EnvRoadFace.vue";
import EnvLightingTable from "./reports/EnvLighting.vue";

import AccidentDriverTransportFeatureTable from "./reports/AccidentDriverTransportFeature.vue";
import AccidentDriverLicenseAgeFeatureTable from "./reports/AccidentDriverLicenseAgeFeature.vue";
import AccidentDriverAgeFeatureTable from "./reports/AccidentDriverAgeFeature.vue";
import AccidentDriverDeathFeatureTable from "./reports/AccidentDriverDeathFeature.vue";
import AccidentJobFeatureTable from "./reports/AccidentJobFeature.vue";
import AccidentAgeFeatureTable from "./reports/AccidentAgeFeature.vue";
import AuthorityManagement from "./reports/AuthorityManagement.vue";
import AuthPersonManagement from "./reports/AuthPersonManagement.vue";
import {
  useReportsQueryForm,
  useAccidentTowns,
  useAccidentFourIndicator,
  useGeneralTrafficAccidentInHourLineChart,
  useGeneralTrafficAccidentInMonthBarChart,
  useGeneralTrafficAccidentDeathNumInHourLineChart,
  useGeneralTrafficAccidentDeathNumInMonthBarChart,
  useAccidentRoads,
  useAccidentFrequentlyOccuredRoads,
  useAccidentDetermination,
  useAccidentForms,
  useAccidentGlss,
  useVehicleDrivingStatus,
  useVehicleInspection,
  useVehicleType,
  useAccidentByTq,
  useAccidentByLmzk,
  useAccidentByLbqk,
  useAccidentByZmtj,
  useAccidentDriverTransportFeature,
  useAccidentDriverLicenseAgeFeature,
  useAccidentDriverAgeFeature,
  useAccidentDriverDeathFeature,
  useAccidentJobFeature,
  useAccidentAgeFeature,
  useHistoricalInvestigationRecords,
  useAuthPersonManagement,
} from "@/hooks/reports/useReports.js";

const tableHeight = ref(400);
const reportData = ref(null);
const deathreportData = ref(null);
const emergencyPagingRef = ref(null);
const jur = jurisdiction();

const routeNameMap = {
  HistoricalInvestigationRecords: "历史案件调查记录",
  DeathAccident: "死亡事故分析",
  AccidentFourIndicator: "四类事故指标",
  AccidentRoads: "事故多发道路",
  AccidentFrequentlyOccuredRoads: "高频事故道路",
  AccidentDetermination: "事故责任认定",
  AccidentForms: "事故形态分析",
  AccidentGlss: "事故GLSS模型",
  AccidentTowns: "乡镇事故分布",
  DrivingStatus: "驾驶状态分析",
  VehicleInspection: "车辆年检情况",
  VehicleType: "涉事车辆类型",
  EnvWeather: "天气环境因素",
  EnvRoad: "道路类型分析",
  EnvRoadFace: "路面状况分析",
  EnvLighting: "照明条件分析",
  AccidentDriverTransportFeature: "驾驶人运输特征",
  AccidentDriverLicenseAgeFeature: "驾驶证龄特征",
  AccidentDriverAgeFeature: "驾驶人年龄特征",
  AccidentDriverDeathFeature: "驾驶人死亡特征",
  AccidentJobFeature: "职业特征分析",
  AccidentAgeFeature: "事故年龄分布",
};

const pageList = ref([
  ...[
    "@/components/EmergencyPaging/index.vue",
    "./reports/HistoricalInvestigationRecords.vue",
    "./reports/DeathAccident.vue",
    "./reports/AccidentFourIndicator.vue",
    "./reports/AccidentRoads.vue",
    "./reports/AccidentFrequentlyOccuredRoads.vue",
    "./reports/AccidentDetermination.vue",
    "./reports/AccidentForms.vue",
    "./reports/AccidentGlss.vue",
    "./reports/AccidentTowns.vue",
    "./reports/DrivingStatus.vue",
    "./reports/VehicleInspection.vue",
    "./reports/VehicleType.vue",
    "./reports/EnvWeather.vue",
    "./reports/EnvRoad.vue",
    "./reports/EnvRoadFace.vue",
    "./reports/EnvLighting.vue",
    "./reports/AccidentDriverTransportFeature.vue",
    "./reports/AccidentDriverLicenseAgeFeature.vue",
    "./reports/AccidentDriverAgeFeature.vue",
    "./reports/AccidentDriverDeathFeature.vue",
    "./reports/AccidentJobFeature.vue",
    "./reports/AccidentAgeFeature.vue",
    "./reports/AuthorityManagement.vue",
    "./reports/AuthPersonManagement.vue",
  ].map((path) => {
    const fileName = path.split("/").pop().replace(".vue", "");
    return {
      path: `/${fileName.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()}`,
      name: routeNameMap[fileName] || fileName,
      disabled: false,
    };
  }),
]);
const activeMenuArray = [
  "a1",
  "a2",
  "b1",
  "b2",
  "b3",
  "b4",
  "c1",
  "c2",
  "d1",
  "e1",
  "e2",
  "e3",
  "f1",
  "f2",
  "g1",
  "g2",
  "g3",
  "g4",
  "h1",
  "h2",
  "h3",
  "h5",
];
const pfl = ref(null);
const plboole = ref(null);
const classText = ref(null);
const handleClick = (event) => {
  const target = event.target;

  // 查找 class 值为 cell 的元素
  const findCellElement = (element, depte = 0) => {
    if (element.classList.contains("cell")) {
      return element;
    }
    if (element.children) {
      if (depte > 3) return null;
      for (let i = 0; i < element.children.length; i++) {
        const child = element.children[i];
        const result = findCellElement(child, depte + 1);
        if (result) {
          return result;
        }
      }
    }
    return null;
  };
  //查找 rowspan 值大于一的元素
  const findRowspanElement = (element) => {
    // 找到离点击位置最近的 tr 元素
    let trElement = element.closest("tr");
    if (!trElement) {
      return null;
    }
    // 循环查找 tr 元素及其兄弟元素
    while (trElement) {
      // 查找 tr 元素的第一条 td 的 rowspan 属性
      const firstTd = trElement.querySelector("td");
      if (firstTd) {
        const rowspan = firstTd.getAttribute("rowspan");
        if (rowspan && parseInt(rowspan, 10) > 1) {
          return trElement;
        }
      }
      // 如果未找到，继续查找上一个兄弟 tr 元素
      trElement = trElement.previousElementSibling;
    }
    // 如果循环结束仍未找到，返回 null
    return null;
  };
  //查找 table 元素的父元素
  const findTableParent = (element, depte = 0) => {
    const tableParent = ref(null);
    if (depte == 0) {
      tableParent.value = element.closest("table");
    } else {
      tableParent.value = element;
    }
    let tableElement = tableParent.value;
    let label = tableElement?.previousElementSibling;
    if (label) {
      if (label.tagName) {
        if (label.tagName == "H2") {
          return label;
        }
      }
    }
    if (tableElement?.parentElement) {
      const tble = findTableParent(tableElement?.parentElement, depte + 1);
      if (tble) {
        return tble;
      }
    }
    return null;
  };
  // 获取 class 值为 cell 的元素
  const cellElement = findCellElement(target);
  const rowSpanElement = findRowspanElement(target);
  const tableParent = findTableParent(target);
  const indexElement = ref(null);
  if (cellElement !== null) {
    const trElement = target.closest("tr");
    const tdElement = cellElement?.parentElement.closest("td");
    if (tdElement) {
      indexElement.value = Array.from(trElement.children).indexOf(tdElement);
    }
    if (trElement?.classList == plboole.value) {
      // classText.value = cellElement.innerText;
      if (classText.value !== cellElement.innerText) {
        classText.value = cellElement.innerText;
        pfl.value = false;
      } else {
        pfl.value = true;
      }
    } else {
      plboole.value = trElement?.classList;
      pfl.value = false;
    }
    // 递归函数来获取所有子元素的信息
    const getChildrenData = (element, depth = 0) => {
      if (depth > 3) return []; // 限制递归深度为 3 层
      return Array.from(element.children).map((child) => {
        const content = child.textContent?.trim() || "";
        return {
          content,
          children: getChildrenData(child, depth + 1), // 递归获取子元素
        };
      });
    };

    const clickData = {
      cellElement: cellElement.innerText,
      parentElement: trElement
        ? {
          children: getChildrenData(trElement), // 获取父元素的父元素的所有子元素
        }
        : null,
      parentElements: rowSpanElement
        ? {
          children: getChildrenData(rowSpanElement), // 获取父元素的父元素的所有子元素
        }
        : null,
      tfsl: pfl.value,
      index: indexElement.value,
      tableParent: tableParent?.innerText,
    };
    handleElementClick(clickData);
  }
};
const propsparms = ref([
  {
    //事故四项接口参数a1
    pageSize: 10,
    pageNum: 1,
    startTime: null,
    endTime: null,
    badw: "",
    requestType: 1,
  },
  {
    //乡镇街道交通事故分页接口a2
    pageSize: 10,
    pageNum: 1,
    startTime: null,
    endTime: null,
    county: "",
    town: "",
    requestType: 2,
  },
  {
    //道路分布统计接口c1
    pageSize: 10,
    pageNum: 1,
    startTime: null,
    endTime: null,
    county: "",
    roadType: "0",
    requestType: 3,
  },
  {
    //各辖区交通事故多发路段分页接口参数
    pageSize: 10,
    pageNum: 1,
    startTime: null,
    endTime: null,
    county: "",
    road: "",
    accidentType: "",
    requestType: 4,
  },
  {
    //事故认定原因分页接口参数
    pageSize: 10,
    pageNum: 1,
    startTime: null,
    endTime: null,
    reason: "",
    swFlag: "1",
    requestType: 5,
  },
  {
    //事故形态统计分页接口参数
    pageSize: 10,
    pageNum: 1,
    startTime: null,
    endTime: null,
    requestType: 6,
    formType: "",
    formName: "",
  },
  {
    //车辆行驶状态统计分页接口参数
    pageSize: 10,
    pageNum: 1,
    startTime: null,
    endTime: null,
    requestType: 7,
    drivingStatus: "",
  },
  {
    //隔离设施分页接口参数
    pageSize: 10,
    pageNum: 1,
    startTime: null,
    endTime: null,
    requestType: 8,
    isolationFacility: "",
    glssFlag: "1",
  },
  {
    //车辆登记检验统计分页接口参数
    pageSize: 10,
    pageNum: 1,
    startTime: null,
    endTime: null,
    requestType: 9,
    carStatus: "",
  },
  {
    //车辆使用性质统计分页接口参数
    pageSize: 10,
    pageNum: 1,
    startTime: null,
    endTime: null,
    requestType: 10,
    carUsageType: "",
  },
  {
    //天气情况统计分页接口参数
    pageSize: 10,
    pageNum: 1,
    startTime: null,
    endTime: null,
    requestType: 11,
    weather: "",
  },
  {
    //路面状况统计分页接口参数
    pageSize: 10,
    pageNum: 1,
    startTime: null,
    endTime: null,
    requestType: 12,
    pavement: "",
  },
  {
    //路表情况统计分页接口参数
    pageSize: 10,
    pageNum: 1,
    startTime: null,
    endTime: null,
    requestType: 13,
    roadSurface: "",
  },
  {
    //照明情况统计分页接口参数
    pageSize: 10,
    pageNum: 1,
    startTime: null,
    endTime: null,
    requestType: 14,
    lighting: "",
  },
  {
    //交通事故责任者交通方式统计分页接口参数
    pageSize: 10,
    pageNum: 1,
    startTime: null,
    endTime: null,
    requestType: 15,
    vehicle: "",
  },
  {
    //交通事故责任者驾驶年龄统计分页接口参数
    pageSize: 10,
    pageNum: 1,
    startTime: null,
    endTime: null,
    requestType: 16,
    driverExperience: "",
  },
  {
    //交通事故责任者年龄统计分页接口参数
    pageSize: 10,
    pageNum: 1,
    startTime: null,
    endTime: null,
    requestType: 17,
    age: "",
  },
  {
    //交通事故责任者职业统计分页接口参数
    pageSize: 10,
    pageNum: 1,
    startTime: null,
    endTime: null,
    requestType: 18,
    job: "",
  },
]);
function newDate(time) {
  let date = new Date(time);
  let y = date.getFullYear();
  let m = date.getMonth() + 1;
  m = m < 10 ? "0" + m : m;
  let d = date.getDate();
  d = d < 10 ? "0" + d : d;
  let h = date.getHours();
  h = h < 10 ? "0" + h : h;
  let minute = date.getMinutes();
  minute = minute < 10 ? "0" + minute : minute;
  let s = date.getSeconds();
  s = s < 10 ? "0" + s : s;
  return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + s;
}
const clickInfo = ref(null);
const handleElementClick = (data) => {
  if (activeMenuArray.includes(activeMenu.value)) {
    const cellElement = Number(data.cellElement);
    const parentElement = data.parentElement;
    const parentElements = data.parentElements;
    const textName = ref(null);
    const props = ref([]);
    if (activeMenu.value == "a1") {
      props.value = { ...propsparms.value[0] };
      textName.value = "badw";
      if (parentElement.children[0].content.length > 2) {
        props.value.badw = parentElement.children[0].content;
      }
    }
    if (activeMenu.value == "a2") {
      props.value = { ...propsparms.value[1] };
      if (
        parentElement.children[0].content.length > 2 ||
        parentElement.children[0].content == "攸县"
      ) {
        props.value.county = parentElement.children[0].content;
      }
    }
    if (activeMenu.value == "c1") {
      props.value = { ...propsparms.value[2] };
      if (
        parentElement.children[0].content.length > 2 ||
        parentElement.children[0].content == "攸县"
      ) {
        props.value.county = parentElement.children[0].content;
      }
      if (data.index < 7) {
        props.value.roadType = "0";
      } else if (data.index < 10) {
        props.value.roadType = "1";
      } else {
        props.value.roadType = "2";
      }
    }
    if (activeMenu.value == "c2") {
      props.value = { ...propsparms.value[3] };
      if (data.tableParent == "简易事故") {
        props.value.accidentType = "2";
      } else if (data.tableParent == "一般事故") {
        props.value.accidentType = "2";
      }
      if (
        parentElement.children[0].content.length > 2 ||
        parentElement.children[0].content == "攸县"
      ) {
        props.value.county = parentElements.children[0].content;
        if (
          parentElement.children[0].content ==
          parentElements.children[0].content
        ) {
          props.value.road = parentElement.children[1].content;
        } else {
          props.value.road = parentElement.children[0].content;
        }
      }
    }
    if (activeMenu.value == "d1") {
      props.value = { ...propsparms.value[4] };
      if (cellElement < Number(parentElement.children[4].content)) {
        props.value.swFlag = "1";
      } else {
        props.value.swFlag = "2";
      }
      if (parentElement.children[0].content !== "合计") {
        props.value.reason = parentElement.children[0].content;
      }
    }
    if (activeMenu.value == "e1") {
      props.value = { ...propsparms.value[5] };
      if (parentElement.children[0].content !== "合计") {
        props.value.formName = parentElement.children[0].content;
        props.value.formType = parentElements.children[0].content;
      }
    }
    if (activeMenu.value == "e2") {
      props.value = { ...propsparms.value[6] };
      if (parentElement.children[0].content !== "合计") {
        props.value.county = parentElement.children[0].content;
      }
    }
    if (activeMenu.value == "e3") {
      props.value = { ...propsparms.value[7] };
      if (data.tableParent == "隔离设施") {
        props.value.glssFlag = "1";
      } else if (data.tableParent == "中央隔离设施") {
        props.value.glssFlag = "2";
      } else if (data.tableParent == "路侧防护设施") {
        props.value.glssFlag = "3";
      }
      if (parentElement.children[0].content !== "合计") {
        props.value.isolationFacility = parentElement.children[0].content;
      }
    }
    if (activeMenu.value == "f1") {
      props.value = { ...propsparms.value[8] };
      if (parentElement.children[0].content !== "合计") {
        props.value.carStatus = parentElement.children[0].content;
      }
    }
    if (activeMenu.value == "f2") {
      props.value = { ...propsparms.value[9] };
      if (parentElement.children[0].content !== "合计") {
        props.value.carUsageType = parentElement.children[0].content;
      }
    }
    if (activeMenu.value == "g1") {
      props.value = { ...propsparms.value[10] };
      if (parentElement.children[0].content !== "合计") {
        props.value.weather = parentElement.children[0].content;
      }
    }
    if (activeMenu.value == "g2") {
      props.value = { ...propsparms.value[11] };
      if (parentElement.children[0].content !== "合计") {
        props.value.pavement = parentElement.children[0].content;
      }
    }
    if (activeMenu.value == "g3") {
      props.value = { ...propsparms.value[12] };
      if (parentElement.children[0].content !== "合计") {
        props.value.roadSurface = parentElement.children[0].content;
      }
    }
    if (activeMenu.value == "g4") {
      props.value = { ...propsparms.value[13] };
      if (parentElement.children[0].content !== "合计") {
        props.value.lighting = parentElement.children[0].content;
      }
    }
    if (activeMenu.value == "h1") {
      props.value = { ...propsparms.value[14] };
      if (parentElement.children[0].content !== "合计") {
        props.value.vehicle = parentElement.children[0].content;
      }
    }
    if (activeMenu.value == "h2") {
      props.value = { ...propsparms.value[15] };
      if (parentElement.children[0].content !== "合计") {
        props.value.driverExperience = parentElement.children[0].content;
      }
    }
    if (activeMenu.value == "h3") {
      props.value = { ...propsparms.value[16] };
      if (parentElement.children[0].content !== "合计") {
        props.value.age = parentElement.children[0].content;
      }
    }
    if (activeMenu.value == "h5") {
      props.value = { ...propsparms.value[17] };
      if (parentElement.children[0].content !== "合计") {
        props.value.job = parentElement.children[0].content;
      }
    }
    const start = daterange.value[0] ? newDate(daterange.value[0]) : null;
    const end = daterange.value[1] ? newDate(daterange.value[1]) : null;
    props.value.startTime = start;
    props.value.endTime = end;
    //只有当cellElement.type 不是 NaN 的时候才执行下面的代码
    if (!Number.isNaN(cellElement) && props.value !== null) {
      props.value.pageSize = cellElement;
      if (emergencyPagingRef.value) {
        if (!data.tfsl) {
          emergencyPagingRef.value.props = props.value;
        } else {
          emergencyPagingRef.value.dialogVisible = true;
        }
      }
    }
  } else {
    return 0;
  }
};
const { activeMenu, daterange, exportAction } = useReportsQueryForm();

const reportUrlCreate = async () => {
  try {
    if (activeMenu.value === "acd") {
      const start = daterange.value[0] ? newDate(daterange.value[0]) : null;
      const end = daterange.value[1] ? newDate(daterange.value[1]) : null;
      const data = { startTime: start, endTime: end };
      const url = await GetReportUrl(data);
      reportData.value.fileUrl = url.fileUrl;
    }
    if (activeMenu.value === "death") {
      deathreportData.value.dataprop = {
        pageNum: "1",
        pageSize: "100",
        startTime: daterange.value[0] ? newDate(daterange.value[0]) : null,
        endTime: daterange.value[1] ? newDate(daterange.value[1]) : null,
      };
    }
  } catch (error) {
    console.log(error);
  }
};
const { accidentTownsTableData, getAccidentTownsTableData } =
  useAccidentTowns();
const { accidentFourIndicatorTableData, getAccidentFourIndicatorTableData } =
  useAccidentFourIndicator();
const {
  generalTrafficLineChartRef,
  generalTrafficAccidentLineChartInstance,
  getGeneralTrafficAccidentLineChartData,
} = useGeneralTrafficAccidentInHourLineChart();
const {
  generalTrafficBarChartRef,
  generalTrafficAccidentBarChartInstance,
  getGeneralTrafficAccidentBarChartData,
} = useGeneralTrafficAccidentInMonthBarChart();
const {
  generalTrafficDeathNumLineChartRef,
  generalTrafficAccidentDeathNumLineChartInstance,
  getGeneralTrafficAccidentDeathNumLineChartData,
} = useGeneralTrafficAccidentDeathNumInHourLineChart();

const {
  generalTrafficDeathNumBarChartRef,
  generalTrafficAccidentDeathNumBarChartInstance,
  getGeneralTrafficAccidentDeathNumBarChartData,
} = useGeneralTrafficAccidentDeathNumInMonthBarChart();

const { accidentRoadsTableData, getAccidentRoadsTableData } =
  useAccidentRoads();
const {
  accidentFrequentlyOccuredRoadsTableData,
  getAccidentFrequentlyOccuredRoadsData,
} = useAccidentFrequentlyOccuredRoads();
const { accidentDeterminationTableData, getAccidentDeterminationTableData } =
  useAccidentDetermination();
const { accidentFormsTableData, getAccidentFormsTableData } =
  useAccidentForms();
const {
  accidentGlssTableData,
  accidentZyGlssTableData,
  accidentFhGlssTableData,
  getaccidentGlssTableData,
  getaccidentZyGlssTableData,
  getaccidentFhGlssTableData,
} = useAccidentGlss();

const { vehicleDrivingStatusTableData, getDrivingStatusTableData } =
  useVehicleDrivingStatus();
const { vehicleInspectionTableData, getVehicleInspectionTableData } =
  useVehicleInspection();
const { vehicleTypeTableData, getVehicleTypeTableData } = useVehicleType();

// 环境因素
const { envWeatherTableData, getAccidentByTqData } = useAccidentByTq();
const { envRoadTableData, getAccidentByLmzkData } = useAccidentByLmzk();
const { envRoadFaceTableData, getAccidentByLbqkData } = useAccidentByLbqk();
const { envLightingTableData, getAccidentByZmtjData } = useAccidentByZmtj();

const { accidentDriverTransportData, getAccidentDriverTransportData } =
  useAccidentDriverTransportFeature();
const { accidentDriverLicenseAgeData, getAccidentDriverLisenceAgeData } =
  useAccidentDriverLicenseAgeFeature();
const { accidentDriverAgeData, getAccidentDriverAgetData } =
  useAccidentDriverAgeFeature();
const { accidentDriverDeathData, getAccidentDeathData } =
  useAccidentDriverDeathFeature();
const { accidentJobData, getAccidentJobData } = useAccidentJobFeature();
const { accidentAgeData, getAccidentAgeData } = useAccidentAgeFeature();
const { historicalInvestigationRecords, getHistoricalInvestigationRecords } =
  useHistoricalInvestigationRecords();
const { authPersonManagement, getAuthPersonManagement } =
  useAuthPersonManagement();
function onMenuChange(index) {
  activeMenu.value = index;
  nextTick(queryAction);
}

function queryAction() {
  const index = activeMenu.value;

  // 一般程序交通事故起数折线图（小时）
  if (index == "a1") {
    getAccidentFourIndicatorTableData();
  }
  // 一般程序交通事故起数柱状图（月份）
  if (index == "a2") {
    getAccidentTownsTableData();
  }

  // 一般程序交通事故起数折线图（小时）
  if (index == "b1") {
    getGeneralTrafficAccidentLineChartData();
  }
  // 一般程序交通事故起数柱状图（月份）
  if (index == "b2") {
    getGeneralTrafficAccidentBarChartData();
  }
  // 一般程序交通事故死亡人数时间折线图（小时）
  if (index == "b3") {
    getGeneralTrafficAccidentDeathNumLineChartData();
  }
  // 一般程序交通事故死亡人数柱状图（月份）
  if (index == "b4") {
    getGeneralTrafficAccidentDeathNumBarChartData();
  }

  if (index == "c1") {
    getAccidentRoadsTableData();
  }

  if (index == "c2") {
    getAccidentFrequentlyOccuredRoadsData();
  }

  if (index == "d1") {
    getAccidentDeterminationTableData();
  }

  if (index == "e1") {
    getAccidentFormsTableData();
  }

  if (index == "e2") {
    getDrivingStatusTableData();
  }

  if (index == "e3") {
    getaccidentGlssTableData();
    getaccidentZyGlssTableData();
    getaccidentFhGlssTableData();
  }

  if (index == "f1") {
    getVehicleInspectionTableData();
  }

  if (index == "f2") {
    getVehicleTypeTableData();
  }

  if (index == "g1") {
    getAccidentByTqData();
  }

  if (index == "g2") {
    getAccidentByLmzkData();
  }

  if (index == "g3") {
    getAccidentByLbqkData();
  }

  if (index == "g4") {
    getAccidentByZmtjData();
  }

  if (index == "h1") {
    getAccidentDriverTransportData();
  }

  if (index == "h2") {
    getAccidentDriverLisenceAgeData();
  }

  if (index == "h3") {
    getAccidentDriverAgetData();
  }

  if (index == "h4") {
    getAccidentDeathData();
  }

  if (index == "h5") {
    getAccidentJobData();
  }

  if (index == "h6") {
    getAccidentAgeData();
  }
  if (index == "death") {
    reportUrlCreate();
  }
  if (index == "hir") {
    getHistoricalInvestigationRecords();
  }
  if (index == "rygl") {
    getAuthPersonManagement();
  }
}

function initChartAndObserveWindowResize() {
  const index = activeMenu.value;
  // 一般程序交通事故起数折线图（小时）
  if (index == "b1") {
    if (generalTrafficAccidentLineChartInstance.value) {
      generalTrafficAccidentLineChartInstance.value.resize();
    }
  }
  // 一般程序交通事故起数柱状图（月份）
  if (index == "b2") {
    if (generalTrafficAccidentBarChartInstance.value) {
      generalTrafficAccidentBarChartInstance.value.resize();
    }
  }
  // 一般程序交通事故死亡人数时间折线图（小时）
  if (index == "b3") {
    if (generalTrafficAccidentDeathNumLineChartInstance.value) {
      generalTrafficAccidentDeathNumLineChartInstance.value.resize();
    }
  }
  // 一般程序交通事故死亡人数柱状图（月份）
  if (index == "b4") {
    if (generalTrafficAccidentDeathNumBarChartInstance.value) {
      generalTrafficAccidentDeathNumBarChartInstance.value.resize();
    }
  }

  tableHeight.value = getViewportHeight();
}
const router = useRouter();
const route = useRoute();
function goback() {
  router.replace({ path: "/index" });
}

function getViewportHeight() {
  const element = document.querySelector(
    ".accident-multiple-analysis .main-area"
  ); // 选择你的元素
  const rect = element.getBoundingClientRect();
  const distanceFromTop = rect.top; // 距离视口顶部的距离

  return window.innerHeight - distanceFromTop - 10;
}

const { stop: stopResizeObserver } = useResizeObserver(
  document.body,
  initChartAndObserveWindowResize
);

onUnmounted(() => {
  stopResizeObserver();
});

onMounted(() => {
  activeMenu.value = "hir";
  daterange.value[0] = route.query.startTime;
  daterange.value[1] = route.query.endTime;
  nextTick(queryAction);
  tableHeight.value = getViewportHeight();
});
</script>

<style lang="less" scoped>
:deep(.el-table) {
  /* 文字颜色 */
  --el-table-text-color: #dfdfdf;
  --el-table-header-text-color: #fff; //#c9cdfe;

  /* 背景色 */
  --el-table-th-bg-color: #28727b;
  /* 表头背景色 */
  --el-table-header-bg-color: #28727b;
  /* 表头背景色 (备用) */
  --el-table-tr-bg-color: transparent;
  /* 行背景色 */

  /* 边框和其他 */
  --el-table-border-color: #28727b; //#051d4b;
  --el-table-row-hover-bg-color: transparent;

  background-color: transparent !important;
  background: transparent !important;

  // --el-table-header-height: 60px;
  // /* 强制设置表头行高 */
  // .el-table__header {
  //   th {
  //     padding: 0; /* 清除默认内边距 */
  //     min-height: var(--el-table-header-height);
  //     .cell {
  //       line-height: var(--el-table-header-height); /* 文字垂直居中 */
  //     }
  //   }
  // }
  thead {
    tr th {
      &.el-table__cell {
        background: transparent !important;
      }

      .cell {
        font-weight: 700;
        padding: 0 4px;
      }
    }

    // 隐藏合并的表头列
    .invisible-col {
      padding: 0 !important;
      border-bottom-width: 0 !important;
    }
  }

  .el-table__body-wrapper {
    background-color: var(--el-table-th-bg-color) !important;

    th {
      background-color: transparent !important;
    }

    tbody {
      tr {

        &:hover,
        &.hover-row {
          border-radius: 10px;
          // box-shadow: -10px 0 15px #082a9c inset, 10px 0 15px #082a9c inset;
          background-color: #429ea5;
          border: none;
        }
      }
    }
  }
}

.accident-multiple-analysis {
  min-height: 100vh;
  display: flex;
  background-color: rgba(5, 62, 69);
  // background: #044b5480;
  backdrop-filter: blur(5px);

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }

  .menu {
    background-color: transparent;

    .go-home,
    .report {
      display: flex;
      align-items: center;
      padding: 20px 10px;
      color: #0db7c0;
      font-size: 16px;
      cursor: pointer;

      &.active,
      &:hover {
        .label {
          color: #fff;
          font-weight: 700;
        }
      }

      .label {
        margin-left: 10px;
      }
    }

    .el-menu {
      width: 280px !important;
      /* 固定宽度 */
      max-height: calc(100vh - 124px);
      overflow: auto;
      border-right: none;
      --el-menu-bg-color: transparent;
      --el-menu-text-color: #fff;
      --el-menu-hover-bg-color: rgba(0, 144, 224, 0.13);
    }

    .el-menu::-webkit-scrollbar {
      display: none;
    }

    /* 修改选中项背景 */
    .el-menu-item.is-active {
      background-image: url("@/assets/img/menu-bgImg.png") !important;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      color: white !important;
      /* 同时修改文字颜色 */
      width: 100%;
    }

    /* 文本超出显示省略号 */
    .menu-text {
      display: inline-block;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .content {
    margin-left: 10px;
    flex: 1;

    :deep(.el-range-editor.el-input__wrapper) {
      border: none;
      background: transparent;
      color: white;

      .el-date-range-picker__content.is-left {
        background: transparent;
      }
    }

    .form {
      :deep(.el-form) {
        --el-text-color-regular: #c7c7c7;

        .el-form-item {
          margin-bottom: 5px;
        }

        .el-button {
          &.el-button--primary {
            border: none !important;
            /* 移除边框 */
            background: url("@/assets/img/button-bgImg.png") center/cover no-repeat !important;
            color: #fff !important;
            /* 确保文字可见 */
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            width: 105px;

            /* 移除Element默认的hover/active效果 */
            &:hover,
            &:active,
            &:focus {
              background: url("@/assets/img/button-bgImg.png") center/cover no-repeat !important;
              opacity: 0.9;
              /* 添加悬停效果 */
            }

            /* 如果图片有透明区域，添加备用背景色 */
            &::after {
              content: "";
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              // background-color: var(
              //   --el-color-primary
              // ); /* 使用Element主题色作为fallback */
              background-color: #fff0;
              z-index: -1;
            }
          }
        }
      }

      padding: 10px;
      // background-color: #0a1f46;
    }

    .main-area {
      // padding: 15px;
      margin-top: 10px;
      padding-bottom: 0;
      height: calc(100% - 30px);
    }

    .general-traffic-accident-chart {
      height: inherit;
    }
  }
}
</style>

<style>
.el-range-editor.el-input__wrapper {
  background-color: rgba(5, 62, 69, 0.9);
}

.el-table--enable-row-transition .el-table__body td.el-table__cell {
  border: 1px solid rgba(5, 62, 69, 0.9);
}

.el-date-editor.el-input,
.el-date-editor.el-input__wrapper {
  box-shadow: none;
}

.el-date-editor .el-range__icon,
.el-date-editor .el-range-input,
.el-date-editor .el-range-separator {
  color: white !important;
}

.el-picker__popper.el-popper,
.el-picker__popper.el-popper .el-popper__arrow:before {
  background-color: rgba(5, 62, 69, 0.9);
  backdrop-filter: blur(10px);
  border: none;
  /* color: white; */
  font-weight: bold;
}

.el-date-range-picker {
  background: rgba(0, 0, 0, 0);
  border: none;
  color: white;
}

.in-range {
  background: rgba(10, 30, 105, 0.5);
}

.el-date-table td.in-range .el-date-table-cell {
  background: none;
}

.el-date-table th,
.el-picker-panel__icon-btn .el-icon {
  color: white;
}
</style>
